<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音视频播放器</title>
    <style>
        #videoContainer {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
            position: relative;
        }
        video {
            width: 100%;
            height: auto;
        }
        #progressBar {
            width: 100%;
            height: 5px;
            background-color: #ccc;
            position: absolute;
            bottom: 0;
        }
        #progress {
            width: 0;
            height: 100%;
            background-color: #f00;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="videoContainer">
    <video id="videoPlayer" src="test/1.mp4" controls></video>
    <div id="progressBar">
        <div id="progress"></div>
    </div>
</div>
<script>

    const videoPlayer = document.getElementById('videoPlayer');
    const progressBar = document.getElementById('progressBar');
    const progress = document.getElementById('progress');

    videoPlayer.addEventListener('timeupdate', () => {
        const percentage = (videoPlayer.currentTime / videoPlayer.duration) * 100;
        progress.style.width = percentage + '%';
    });

    progressBar.addEventListener('click', (e) => {
        const clickPosition = e.clientX - progressBar.getBoundingClientRect().left;
        const percentage = clickPosition / progressBar.offsetWidth;
        videoPlayer.currentTime = percentage * videoPlayer.duration;
    });

    window.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowUp') {
            videoPlayer.playbackRate += 0.1;
        } else if (e.key === 'ArrowDown') {
            videoPlayer.playbackRate -= 0.1;
        } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
            const currentIndex = yourVideoList.indexOf(videoPlayer.src);
            if (e.key === 'ArrowRight') {
                currentIndex++;
            } else {
                currentIndex--;
            }
            if (currentIndex >= 0 && currentIndex < yourVideoList.length) {
                videoPlayer.src = yourVideoList[currentIndex];
                videoPlayer.play();
            }
        }
    });
</script>
</body>
</html>
